<template>
    <div class="goodsinfo-container">
        <transition
                @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter">
            <!--半场动画,只是操作enter部分js-->
            <!--这个小球让他先隐藏再出现，我们给这个过程来个动画-->
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
        <!--商品轮播图区域-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunbotuList="lunbotu" :isfull="false"></swiper>
                </div>
            </div>
        </div>

        <!--商品购买区域-->
        <div class="mui-card">
            <div class="mui-card-header">{{ goodsinfo.title }}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：
                        <del>￥{{ goodsinfo.market_price }}</del>&nbsp;&nbsp;销售价：<span class="now_price">￥{{ goodsinfo.sell_price }}</span>
                    </p>
                    <p>购买数量：
                        <!--这东西既涉及了父传子，又涉及了子传父
                        父传子绑定属性，子传父绑定方法-->
                        <numbox :max="goodsinfo.stock_quantity" @getcount="getSelectedCount"></numbox>
                    </p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                        <!-- 分析： 如何实现加入购物车时候，拿到 选择的数量 -->
                        <!-- 1. 经过分析发现： 按钮属于 goodsinfo 页面， 数字 属于 numberbox 组件 -->
                        <!-- 2. 由于涉及到了父子组件的嵌套了，所以，无法直接在 goodsinfo 页面zhong 中获取到 选中的商品数量值-->
                        <!-- 3. 怎么解决这个问题：涉及到了 子组件向父组件传值了（事件调用机制） -->
                        <!-- 4. 事件调用的本质： 父向子传递方法，子调用这个方法， 同时把 数据当作参数 传递给这个方法 -->
                    </p>
                </div>
            </div>
        </div>

        <!--商品参数区-->
        <div class="mui-card">
            <div class="mui-card-header">页眉</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{ goodsinfo.goods_no }}</p>
                    <p>库存情况：{{ goodsinfo.stock_quantity }}件</p>
                    <p>上架时间：{{ goodsinfo.add_time | dateFormat }}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(id)">图文介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
  import {Toast} from 'mint-ui'
  // 轮播图组件
  import swiper from '../subcomponents/swiper.vue'
  // 数字选择框组件
  import numbox from '../subcomponents/goodsinfo_numbox.vue'

  export default {
    data() {
      return {
        id: this.$route.params.id, // 将路由参数对象中的 id 挂载到 data , 方便后期调用
        lunbotu: [], // 轮播图的数据
        goodsinfo: {}, // 获取到的商品的信息
        ballFlag: false, // 控制小球的隐藏和显示的标识符
        selectedCount: 1 // 保存用户选中的商品数量， 默认，认为用户买1个
      }
    },
    created() {
      this.getLunbotu();
      this.getGoodsInfo();
    },
    methods: {
      getLunbotu() {
        this.$http.get(this.COMMON.apiList["缩略图"] + this.id).then(response => {
          if (response.body.status === 0) {
            // 先循环轮播图数组的每一项，为 item 添加 img 属性，因为 轮播图 组件中，只认识 item.img， 不认识 item.src
            this.lunbotu = response.body.message
          } else {
            Toast("加载评论失败")
          }
        })
      },
      getGoodsInfo() {
        //获取商品信息
        this.$http.get(this.COMMON.apiList["商品参数区"] + this.id).then(response => {
          if (response.body.status === 0) {
            this.goodsinfo = response.body.message[0]
          } else {
            Toast("加载评论失败")
          }
        })
      },
      goDesc(id) {
        this.$router.push({name: 'goodsdesc', params: {id: id}}) // goodsinfo是路由规则的名字，这里 还给给叫goodsinfo的路由规则传了个参叫id
      },
      goComment(id) {
        this.$router.push({name: 'goodscomment', params: {id: id}}) // goodsinfo是路由规则的名字，这里 还给给叫goodsinfo的路由规则传了个参叫id
      },
      addToShopCar() { //加入购物车
        this.ballFlag = !this.ballFlag;
        // { id:商品的id, count: 要购买的数量, price: 商品的单价，selected: false  }
        // 拼接出一个，要保存到 store 中 car 数组里的 商品信息对象
        var goodsinfo = {
          id: parseInt(this.id),
          count: this.selectedCount,
          price: this.goodsinfo.sell_price,
          selected: true
        }
        // 调用 store 中的 mutations 来将商品加入购物车
        this.$store.commit("addToCar", goodsinfo);
      },
      // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
      // 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
      beforeEnter(el) {
        // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
        // 设置小球开始动画之前的，起始位置
        // 在过渡钩子函数中使用 JavaScript 直接操作 DOM
        el.style.transform = `translate(0, 0)`
      },
      enter(el, done) {
        // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
        // 可以认为 el.offsetWidth 会强制动画刷新
        // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
        el.offsetWidth
        const ballPosition = this.$refs.ball.getBoundingClientRect()
        const badgePosition = document.getElementById('badge').getBoundingClientRect()
        const xDist = badgePosition.left - ballPosition.left
        const yDist = badgePosition.top - ballPosition.top
        el.style.transform = `translate(${xDist}px, ${yDist}px)`
        el.style.transition = 'all 0.8s cubic-bezier(.67,.1,.06,.73)'//过渡动画，没有这个，小球就直接瞬移到，ease是动画效果
        // 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
        done()
      },
      afterEnter(el) {
        // 动画完成之后，会调用 afterEnter
        // console.log('ok')
        this.ballFlag = !this.ballFlag;//再次让小球隐藏，这样下次再调用的时候就还是enter部分
      },
      getSelectedCount(count) {
        this.selectedCount = count
      }
    },
    components: {
      swiper,
      numbox
    }
  }
</script>

<style lang="scss" scoped>
    .goodsinfo-container {
        background-color: #eeeeee;
        overflow: hidden;
        .now_price {
            color: red;
            font-size: 16px;
            font-weight: bold;
        }
        .mui-card-footer {
            display: block;
            button {
                margin: 15px 0;
            }
        }
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #ff0000;
            position: absolute;
            z-index: 99;
            /*top: 58.2%;*/
            /*left: 40.8%;*/
            top: 405px;
            left: 150px;
        }
    }
</style>